import {useLayoutTheme} from "~/composables/layout-theme";
import {layoutThemeConfig} from "~/config/layout-theme";
import type {LayoutType} from "~/config/layout-theme.ts";
import {darkTheme} from "~/config/app-theme";
import {toggleDark} from "~/composables/auto-dark.ts";
import {colors, darkColors, type ThemeType} from "~/config/theme.ts";

/**
 * @description: 全局状态管理
 * @author: ellwood
 * @date: 2025-01-22
 * @version: V1.0.0
 */

export const useAppStore = defineStore("app", () => {
  // 判断当前是不是在开发环境中，如果是在开发环境中那么我们直接使用默认的配置即可。
  const defaultLayout = import.meta.env.DEV
    ? layoutThemeConfig
    : useLayoutTheme();
  const layout = reactive(unref(defaultLayout));

  const visible = ref(false);

  const toggleVisible = (val: boolean) => {
    visible.value = val;
  };

  const toggleCollapsed = (val: boolean) => {
    layout.collapsed = val;
  };

  const updateLayout = (val: "mix" | "side" | "top") => {
    layout.layout = val;
  };

  const updateLayoutStyle = (val: "dark" | "light" | "inverted") => {
    layout.layoutStyle = val;
  };

  const layoutList = computed<LayoutType[]>(() => {
    return [
      {
        id: "side",
        key: "side",
        title: "global.layout.setting.drawer.layout.side",
      },
      {
        id: "top",

        key: "top",
        title: "global.layout.setting.drawer.layout.top",
      },
      {
        id: "mix",
        key: "mix",
        title: "global.layout.setting.drawer.layout.mix",
      },
    ];
  });

  watch(
    () => layout.layoutStyle,
    (val) => {
      if (val === "dark") toggleDark(true);
      else toggleDark(false);
    },
  );

  const layoutStyleList = computed<LayoutType[]>(() => {
    const list: LayoutType[] = [
      {
        id: "light",
        key: "side",
        title: "global.layout.setting.drawer.style.light",
      },
    ];

    if (layout.layout !== "mix") {
      list.push({
        id: "inverted",
        key: "side",
        inverted: true,
        title: "global.layout.setting.drawer.style.inverted",
      });
    } else {
      if (layout.layoutStyle !== "dark") updateLayoutStyle("light");
    }
    list.push({
      id: "dark",
      key: "side",
      dark: true,
      title: "global.layout.setting.drawer.style.dark",
    });
    return list;
  });

  const layoutTheme = computed(() => {
    if (layout.layoutStyle === "dark") {
      return darkTheme;
    }
    return undefined;
  });

  const overridesTheme = computed(() => {
    if (isDark.value) {
      return darkColors[layout.theme];
    } else {
      return colors[layout.theme];
    }
  });

  const updateTheme = (val: string) => {
    layout.theme = val;
  };

  const themeList = computed<ThemeType[]>(() => {
    const list: ThemeType[] = [];
    const myColor = isDark.value ? darkColors : colors;
    for (const colorsKey in myColor) {
      const value = myColor[colorsKey];
      list.push({
        color: value.common?.primaryColor as string,
        key: colorsKey,
        title: `global.layout.setting.drawer.theme.${colorsKey}`,
      });
    }
    return list;
  });

  return {
    layout,
    visible,
    layoutList,
    layoutStyleList,
    toggleVisible,
    toggleCollapsed,
    updateLayout,
    updateLayoutStyle,
    layoutTheme,
    overridesTheme,
    updateTheme,
    themeList,
  };
});
